<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="renderer" content="webkit">
  <title>场景应用 | layui.dropdown.js</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
  <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css" media="all">
  <link rel="stylesheet" href="/js/lay-module/dropdown/dropdown.css">
  <link rel="stylesheet" href="/js/lay-module/dropdown/style.css">
  

<style>
  body {
    padding: 40px;
  }

  .layui-btn {
    text-transform: uppercase;
  }

  .layui-code {
    margin: 30px 20px 20px;
  }

  .layui-tooltip .layui-dropdown-menu {
  border: none;
  border-radius: 4px;
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 6px 10px;
  min-height: 38px;
  line-height: 24px;
}

.layui-tooltip .layui-dropdown-menu [x-arrow] {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border: 5px solid transparent;
}

.layui-tooltip .layui-dropdown-menu[x-placement^="top"] [x-arrow] {
  bottom: -10px;
  border-top-color: #000;
}

.layui-tooltip .layui-dropdown-menu[x-placement^="right"] [x-arrow] {
  left: -10px;
  border-right-color: #000;
}

.layui-tooltip .layui-dropdown-menu[x-placement^="bottom"] [x-arrow] {
  top: -10px;
  border-bottom-color: #000;
}

.layui-tooltip .layui-dropdown-menu[x-placement^="left"] [x-arrow] {
  right: -10px;
  border-left-color: #000;
}
</style>


</head>
<body>
  

<main>
<fieldset class="layui-elem-field layui-field-title">
  <legend>模拟 <code>layui.select</code></legend>
</fieldset>
<!-- 因为已经存在 layui.select 组件，除非你需要定制化一些，请不要重复造轮子 -->
<!-- 加入一点离开的动画 -->
<div class="layui-unselect layui-form-select" id="scene-select">
  <div class="layui-select-title">
    <input type="text" placeholder="请选择" readonly class="layui-input layui-unselect">
    <i class="layui-edge"></i>
  </div>
  <dl class="layui-anim layui-anim-upbit" data-role="menu">
    <dd lay-value="" class="layui-select-tips layui-this">请选择</dd>
    <dd lay-value="0" class="">北京</dd>
    <dd lay-value="1" class="">上海</dd>
    <dd lay-value="2" class="">广州</dd>
    <dd lay-value="3" class="">深圳</dd>
    <dd lay-value="4" class="">杭州</dd>
  </dl>
</div>
<pre id="html" class="layui-code" lay-encode="true" lay-skin="notepad">
<!-- 因为已经存在 layui.select 组件，除非你需要定制化一些，请不要重复造轮子 -->
<!-- 加入一点离开的动画 -->
<div class="layui-unselect layui-form-select" id="scene-select">
  <div class="layui-select-title">
    <input type="text" placeholder="请选择" readonly class="layui-input layui-unselect">
    <i class="layui-edge"></i>
  </div>
  <dl class="layui-anim layui-anim-upbit" data-role="menu">
    <dd lay-value="" class="layui-select-tips layui-this">请选择</dd>
    <dd lay-value="0" class="">北京</dd>
    <dd lay-value="1" class="">上海</dd>
    <dd lay-value="2" class="">广州</dd>
    <dd lay-value="3" class="">深圳</dd>
    <dd lay-value="4" class="">杭州</dd>
  </dl>
</div>      
</pre>
<pre id="js" class="layui-code" lay-encode="true" lay-skin="notepad">
layui.use(['jquery', 'dropdown'], function ($, dropdown) {
  var instance = dropdown.render({
    dropdown: '#scene-select', // 确保唯一化
    toggle: '.layui-select-title', // 确保唯一化
    menu: '[data-role="menu"]', // 确保唯一化
    trigger: 'click', // 因为是模仿 layui.select 所以我们不在使用 hover
    className: {
      hideAnimation: 'layui-anim layui-anim-downbit', // 为了区别原生渲染，加入一些动画，但是这里有一个小问题就是三角动画延迟了
      showDropdown: 'layui-form-selected', // 配置菜单展开的样式类名
      showMenu: '' // 移除菜单栏的样式类名，这样和 layui.select 展现方式一致
    }
  });

  // 这块代码是为了实现 select 的动作效果，不能光有样儿，没有功能
  var $input = $('#scene-select .layui-input')
  $('[data-role="menu"]').on('click', 'dd', function() {
    var $this = $(this);
    var value = $this.attr('lay-value');
    var text = $this.text();

    $input.val(value ? $.trim(text) : ''); 
    instance.hide();
  });
})
</pre>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px">
  <legend>集成其他组件 <code>layui.tree</code></legend>
</fieldset>
<div class="layui-unselect layui-form-select" id="scene-treeselect">
  <div class="layui-select-title">
    <input type="text" placeholder="请选择" readonly class="layui-input layui-unselect">
    <i class="layui-edge"></i>
  </div>
  <dl class="layui-anim layui-anim-upbit" data-role="menu">
    <div id="scene-treeselect-tree" class="demo-tree-more"></div>
  </dl>
</div>
<pre id="html2" class="layui-code" lay-encode="true" lay-skin="notepad">
<div class="layui-unselect layui-form-select" id="scene-treeselect">
  <div class="layui-select-title">
    <input type="text" placeholder="请选择" readonly class="layui-input layui-unselect">
    <i class="layui-edge"></i>
  </div>
  <dl class="layui-anim layui-anim-upbit" data-role="menu">
    <div id="scene-treeselect-tree" class="demo-tree-more"></div>
  </dl>
</div>      
</pre>
<pre id="js2" class="layui-code" lay-encode="true" lay-skin="notepad">
layui.use(['jquery', 'dropdown', 'tree'], function ($, dropdown, tree) {
  var $input2 = $('#scene-treeselect .layui-input');
  var instance2 = dropdown.render({
    dropdown: '#scene-treeselect',
    toggle: '.layui-select-title',
    menu: '[data-role="menu"]',
    trigger: 'click',
    className: {
      dropdownShow: 'layui-form-selected',
      menuShow: ''
    }
  });
  instance2.on(instance2.ON_SHOW, function(params) {
    var visible = params.visible; // 每一次的开关都会触发事件
    tree.reload('demo1'); // 这里我重新加载了树
  });
  // 此处渲染树
  tree.render({
    elem: '#scene-treeselect-tree',
    data: data2, // 数据格式为 layui.tree 所要求的数据，layui 版本 2.5.0+
    click: function(obj) {
      var data = obj.data;
      var value = data.id;
      var text = data.title;
      // 父级节点过滤掉
      if (!data.children || !data.children.length) {
        $input2.val(value ? $.trim(text) : ''); 
      }
    }
  })
})
</pre>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px">
    <legend>配合样式修改制作 <code>tooltip</code></legend>
</fieldset>


<div class="layui-dropdown layui-tooltip is-up" id="scene-tooltip-up">
  <button class="layui-btn layui-dropdown-toggle" style="text-transform: uppercase;">
    up
  </button>
  <div class="layui-dropdown-menu">
    <div class="layui-dropdown-menu-arrow" x-arrow></div>
    <span>up</span>
  </div>
</div>

<div class="layui-dropdown layui-tooltip is-right" id="scene-tooltip-right">
  <button class="layui-btn layui-dropdown-toggle" style="text-transform: uppercase;">
    right
  </button>
  <div class="layui-dropdown-menu">
    <div class="layui-dropdown-menu-arrow" x-arrow></div>
    <span>right</span>
  </div>
</div>

<div class="layui-dropdown layui-tooltip is-down" id="scene-tooltip-down">
  <button class="layui-btn layui-dropdown-toggle" style="text-transform: uppercase;">
    down
  </button>
  <div class="layui-dropdown-menu">
    <div class="layui-dropdown-menu-arrow" x-arrow></div>
    <span>down</span>
  </div>
</div>

<div class="layui-dropdown layui-tooltip is-left" id="scene-tooltip-left">
  <button class="layui-btn layui-dropdown-toggle" style="text-transform: uppercase;">
    left
  </button>
  <div class="layui-dropdown-menu">
    <div class="layui-dropdown-menu-arrow" x-arrow></div>
    <span>left</span>
  </div>
</div>

<pre id="html3" class="layui-code" lay-encode="true" lay-skin="notepad">


<div class="layui-dropdown layui-tooltip is-up" id="scene-tooltip-up">
  <button class="layui-btn layui-dropdown-toggle" style="text-transform: uppercase;">
    up
  </button>
  <div class="layui-dropdown-menu">
    <div class="layui-dropdown-menu-arrow" x-arrow></div>
    <span>up</span>
  </div>
</div>

<div class="layui-dropdown layui-tooltip is-right" id="scene-tooltip-right">
  <button class="layui-btn layui-dropdown-toggle" style="text-transform: uppercase;">
    right
  </button>
  <div class="layui-dropdown-menu">
    <div class="layui-dropdown-menu-arrow" x-arrow></div>
    <span>right</span>
  </div>
</div>

<div class="layui-dropdown layui-tooltip is-down" id="scene-tooltip-down">
  <button class="layui-btn layui-dropdown-toggle" style="text-transform: uppercase;">
    down
  </button>
  <div class="layui-dropdown-menu">
    <div class="layui-dropdown-menu-arrow" x-arrow></div>
    <span>down</span>
  </div>
</div>

<div class="layui-dropdown layui-tooltip is-left" id="scene-tooltip-left">
  <button class="layui-btn layui-dropdown-toggle" style="text-transform: uppercase;">
    left
  </button>
  <div class="layui-dropdown-menu">
    <div class="layui-dropdown-menu-arrow" x-arrow></div>
    <span>left</span>
  </div>
</div>
      
</pre>
<pre id="js3" class="layui-code" lay-encode="true" lay-skin="notepad">
layui.use(['jquery', 'dropdown'], function ($, dropdown) {
  $.each(['up', 'right', 'down', 'left'], function(i, item) {
    dropdown.render({
      dropdown: '#scene-tooltip-'.concat(item),
      className: {
        showAnimation: 'layui-anim layui-anim-fadein',
        hideAnimation: 'layui-anim layui-anim-fadeout'
      }
    })
  })
})  
</pre>
<pre id="css3" class="layui-code" lay-encode="true" lay-skin="notepad">
.layui-tooltip .layui-dropdown-menu {
  border: none;
  border-radius: 4px;
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 6px 10px;
  min-height: 38px;
  line-height: 24px;
}

.layui-tooltip .layui-dropdown-menu [x-arrow] {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border: 5px solid transparent;
}

.layui-tooltip .layui-dropdown-menu[x-placement^="top"] [x-arrow] {
  bottom: -10px;
  border-top-color: #000;
}

.layui-tooltip .layui-dropdown-menu[x-placement^="right"] [x-arrow] {
  left: -10px;
  border-right-color: #000;
}

.layui-tooltip .layui-dropdown-menu[x-placement^="bottom"] [x-arrow] {
  top: -10px;
  border-bottom-color: #000;
}

.layui-tooltip .layui-dropdown-menu[x-placement^="left"] [x-arrow] {
  right: -10px;
  border-left-color: #000;
}   
</pre>

</main>

<script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
  var data2 = [{
    title: '早餐'
    ,id: 1
    ,children: [{
      title: '油条'
      ,id: 5
    },{
      title: '包子'
      ,id: 6
    },{
      title: '豆浆'
      ,id: 7
    }]
  },{
    title: '午餐'
    ,id: 2
    ,checked: true
    ,children: [{
      title: '藜蒿炒腊肉'
      ,id: 8
    },{
      title: '西湖醋鱼'
      ,id: 9
    },{
      title: '小白菜'
      ,id: 10
    },{
      title: '海带排骨汤'
      ,id: 11
    }]
  },{
    title: '晚餐'
    ,id: 3
    ,children: [{
      title: '红烧肉'
      ,id: 12
      ,fixed: true
    },{
      title: '番茄炒蛋'
      ,id: 13
    }]
  },{
    title: '夜宵'
    ,id: 4
    ,children: [{
      title: '小龙虾'
      ,id: 14
      ,checked: true
    },{
      title: '香辣蟹'
      ,id: 15
      ,disabled: true
    },{
      title: '烤鱿鱼'
      ,id: 16
    }]
  }];

  layui.use(['jquery', 'dropdown', 'code', 'tree'], function ($, dropdown, code, tree) {
    code({elem: '#html', title: 'Html', about: false});
    code({elem: '#js', title: 'JavaScript', about: false});
    
    code({elem: '#html2', title: 'Html', about: false});
    code({elem: '#js2', title: 'JavaScript', about: false});

    code({elem: '#html3', title: 'Html', about: false});
    code({elem: '#js3', title: 'JavaScript', about: false});
    code({elem: '#css3', title: 'Css', about: false});

    // select
    var instance = dropdown.render({
      dropdown: '#scene-select',
      toggle: '.layui-select-title',
      menu: '[data-role="menu"]',
      trigger: 'click',
      className: {
        hideAnimation: 'layui-anim layui-anim-downbit',
        showDropdown: 'layui-form-selected',
        showMenu: ''
      }
    });

    var $input = $('#scene-select .layui-input');
    $('[data-role="menu"]').on('click', 'dd', function() {
      var $this = $(this);
      var value = $this.attr('lay-value');
      var text = $this.text();

      $input.val(value ? $.trim(text) : ''); 
      instance.hide();
    });
    

    // treeselect
    var $input2 = $('#scene-treeselect .layui-input');
    var instance2 = dropdown.render({
      dropdown: '#scene-treeselect',
      toggle: '.layui-select-title',
      menu: '[data-role="menu"]',
      trigger: 'hover',
      className: {
        dropdownShow: 'layui-form-selected',
        menuShow: ''
      }
    });
    instance2.on(instance2.ON_SHOW, function() {
      tree.reload('demo1');
    });

    tree.render({
      elem: '#scene-treeselect-tree',
      data: data2,
      id: 'demo1',
      click: function(obj) {
          console.log(obj)
        var data = obj.data;
        var value = data.id;
        var text = data.title;

        if (!data.children || !data.children.length) {
          $input2.val(value ? $.trim(text) : '')

          instance2.hide();
        }
      }
    });

    
    // tooltip
    $.each(['up', 'right', 'down', 'left'], function(i, item) {
      dropdown.render({
        dropdown: '#scene-tooltip-'.concat(item),
        // trigger: 'click',
        className: {
          showAnimation: 'layui-anim layui-anim-fadein',
          hideAnimation: 'layui-anim layui-anim-fadeout'
        }
      });
    });
  })
</script>
</body>
</html>